<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.name" clearable placeholder="输入大区名称" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <!-- <el-select v-model="query.status" clearable placeholder="选择审核状态" class="filter-item" style="width: 130px">
       
        <el-option v-for="item in checkStatus" :key="item.index" :label="item.label" :value="item.index" />
      </el-select> -->
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button
          type="danger"
          class="filter-item"
          size="mini"
          icon="el-icon-refresh"
          @click="toQuery"
        >刷新</el-button>
      </div>
    </div>
     <!--表单组件-->
      <el-dialog  :visible.sync="peopleDialogVisible" title="重置负责人" width="500px">
         <div>确定要重置负责人吗？</div>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="peopleDialogVisible = false">取消</el-button>
          <el-button  type="primary" @click="submitPro">确认</el-button>
        </div>
      </el-dialog>
         <!--表单组件-->
      <el-dialog  :visible.sync="dialogVisible" title="分配负责人" width="500px">
        <el-form ref="form" :model="form"  size="small" label-width="125px">
          <el-form-item label="选择负责人：" prop="">
               <el-select v-model="formValidate.userId" clearable placeholder="选择负责人" class="filter-item" style="width: 130px">
                    <el-option v-for="item in userListOptions" :key="item.uid" :label="item.username" :value="item.uid" />
               </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cancelCU">取消</el-button>
          <el-button  type="primary" @click="submitCU">确认</el-button>
        </div>
      </el-dialog>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
      <el-table-column prop="regionCode" label="大区编码" />
      <el-table-column prop="regionName" label="大区名称" />
       <el-table-column prop="userName" label="负责人" />
      <el-table-column label="操作" width="300px" align="center" >
        <template slot-scope="scope">
          <el-button  v-if="scope.row.userName"  size="mini" type="primary" icon="el-icon-edit" @click="subDelete(scope.row.regionCode)">重置</el-button>
           <!-- <el-popover
            :ref="scope.row.id"
            placement="top"
            width="180"
          >
            <p>确定要重置负责人吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.uid].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.uid)">确定</el-button>
            </div>
              </el-popover> -->
          <el-button  v-if="!scope.row.userName"  slot="reference"  type="danger" icon="el-icon-plus" size="mini" @click="childrenNode(scope.row.regionCode)" >分配</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />

    
  </div>
</template>

<script>
import checkPermission from "@/utils/permission";
import initData from "@/mixins/crud";
import { userList, add, reset } from "@/api/largeManage";
export default {
  components: {},
  mixins: [initData],
  data() {
    return {
      dialogVisible: false,
      peopleDialogVisible: false,
      dropDownValue: "",
      optionsMetaShow: [],
      delLoading: false,
      visible: false,
      userListOptions: [],

      checkStatus: [
        { index: "", label: "全部" },
        { index: "0", label: "待审核" },
        { index: "1", label: "审核通过" },
        { index: "2", label: "审核未通过" },
      ],
      isAttr: false,
      cateId: null,
      formValidate: {
        userId: "",
      },
      regionCode: "",
    };
  },
  created() {
    this.$nextTick(() => {
      this.init().then(() => {
        this.optionsMetaShow = this.cateList;
      });
    });
  },
  mounted() {
    this.userList();
  },
  methods: {
    //审核
    toUpdateURL(id) {
      this.$router.push({
        path: "/nodeManage/nodeCheck/" + id,
        query: { identNumber: "2" },
      });
      console.log(this.$router);
    },
    //详情
    subDetail(id) {
      this.$router.push({
        path: "/nodeManage/nodeDetail/" + id,
        query: { identNumber: "3" },
      });
      console.log(this.$router);
    },
    //修改
    subUpdate(id) {
      this.$router.push({
        path: "/nodeManage/nodeUpdate/" + id,
        query: { identNumber: "4" },
      });
      console.log(this.$router);
    },
    subDelete(e) {
      this.regionCode = e;
      this.peopleDialogVisible = true;
    },
    submitPro() {
      reset({
        regionCode: this.regionCode,
      }).then(res => {
        console.log("hahaha");
        this.peopleDialogVisible = false;
        this.init();
      });
    },
    childrenNode(e) {
      this.regionCode = e;
      this.dialogVisible = true;
    },

    userList() {
      userList().then(res => {
        this.userListOptions = res.data;
      });
    },
    //分配负责人
    submitCU() {
      add({
        regionCode: this.regionCode,
        userId: this.formValidate.userId,
      }).then(res => {
        console.log("hahaha");
        this.dialogVisible = false;
        this.init();
      });
    },

    //取消子节点
    cancelCU() {
      this.dialogVisible = false;
    },
    dataFilter(val) {
      this.value = val;
      if (val) {
        this.optionsMetaShow = this.cateList.filter(item => {
          if (
            !!~item.label.indexOf(val) ||
            !!~item.label.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        this.optionsMetaShow = this.cateList;
      }
    },
    checkPermission,
    beforeInit() {
      this.url = "api/region/list";
      this.params = {
        page: this.page + 1,
        size: this.size,
        // isDel: 0,
        // cateId: this.cateId,
      };
      const query = this.query;
      const status = query.status;
      const name = query.name;
      if (status && name) {
        this.params[status] = name;
      }
      return true;
    },

    onSale(id, status) {
      this.$confirm(`确定进行[${status ? "下架" : "上架"}]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          onsale(id, { status: status }).then(({ data }) => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1000,
              onClose: () => {
                this.init();
              },
            });
          });
        })
        .catch(() => {});
    },
    add() {
      this.isAdd = true;
      this.$refs.form.dialog = true;
      this.$refs.form.getCates();
    },
    edit(data) {
      this.isAdd = false;
      const _this = this.$refs.form;
      _this.getCates();
      _this.form = {
        id: data.id,
        merId: data.merId,
        image: data.image,
        sliderImage: data.sliderImage,
        imageArr: data.image.split(","),
        sliderImageArr: data.sliderImage.split(","),
        storeName: data.storeName,
        storeInfo: data.storeInfo,
        keyword: data.keyword,
        barCode: data.barCode,
        storeCategory: data.storeCategory || { id: null },
        price: data.price,
        vipPrice: data.vipPrice,
        otPrice: data.otPrice,
        postage: data.postage,
        unitName: data.unitName,
        sort: data.sort,
        sales: data.sales,
        stock: data.stock,
        status: data.status,
        isHot: data.isHot,
        isBenefit: data.isBenefit,
        isBest: data.isBest,
        isNew: data.isNew,
        description: data.description,
        addTime: data.addTime,
        isPostage: data.isPostage,
        isDel: data.isDel,
        merUse: data.merUse,
        giveIntegral: data.giveIntegral,
        cost: data.cost,
        isSeckill: data.isSeckill,
        isBargain: data.isBargain,
        isGood: data.isGood,
        ficti: data.ficti,
        browse: data.browse,
        codePath: data.codePath,
        soureLink: data.soureLink,
      };
      _this.dialog = true;
    },
    attr(data) {
      console.log(3333);
      this.isAttr = false;
      const _this = this.$refs.form2;
      _this.form = {
        id: data.id,
        merId: data.merId,
        image: data.image,
        sliderImage: data.sliderImage,
        storeName: data.storeName,
        storeInfo: data.storeInfo,
        keyword: data.keyword,
        barCode: data.barCode,
        storeCategory: data.storeCategory,
        price: data.price,
        vipPrice: data.vipPrice,
        otPrice: data.otPrice,
        postage: data.postage,
        unitName: data.unitName,
        sort: data.sort,
        sales: data.sales,
        stock: data.stock,
        status: data.status,
        isHot: data.isHot,
        isBenefit: data.isBenefit,
        isBest: data.isBest,
        isNew: data.isNew,
        description: data.description,
        addTime: data.addTime,
        isPostage: data.isPostage,
        isDel: data.isDel,
        merUse: data.merUse,
        giveIntegral: data.giveIntegral,
        cost: data.cost,
        isSeckill: data.isSeckill,
        isBargain: data.isBargain,
        isGood: data.isGood,
        ficti: data.ficti,
        browse: data.browse,
        codePath: data.codePath,
        soureLink: data.soureLink,
      };
      _this.dialog = true;
      this.$refs.form2.getAttrs(data.id);
    },
  },
};
</script>

<style scoped>
</style>
